<template>
	<view>
		<!-- 2.个人信息 -->
		<view class="flex person">
			<view class="person-icon">
				<image
					src='https://img.youxuanan.com/crmebimage/public/product/2024/10/11/4721de23d1b4431592bc1ad4e69882fc5oqx3ouz8v.png'
					mode='widthFix' style="width: 100%;"></image>
			</view>
			<view style="margin: 0 20px;">
				<view class="person-info"><text>{{merInfo.name}}</text><text>{{merInfo.phone}}</text></view>
				<view class="person-address">
					<text>{{merInfo.addressDetail}}</text>
				</view>
			</view>
			<view><i class="iconfont icon-fanhui2"></i></view>
		</view>
		<!-- 3.商品信息-->
		<view class="goods-content goods">
			<view class="flex1">
				<view class="shop-icon">{{merInfo.name || '-'}}</view>
				<view><u-icon name="arrow-right" size="28"></u-icon></view>
			</view>
			<view class="flex goods">
				<image :src="goodsInfo.goodsImage" mode='widthFix' style="width: 2rem;"></image>
				<view style="width: 200px; margin: 0 10px;">
					<view class="goods-info">{{goodsInfo.goodsName}}</view>
					<view class="goods-tag">
						<text>{{goodsInfo.specName}}</text>
					</view>
				</view>
				<view style="padding-top: 15px;">x1</view>
			</view>
		</view>
		
		<!-- 4.配送方式 -->
		<view class="peisong">
			<view class="justify-between">
				<text>设备序列号</text>
				<text>{{info.info}}</text>
			</view>
			<view class="flex peisong-item">
				<text>归还提交日</text>
				<text >{{info.returnSubmitTime}}</text>
			</view>
			<view class="flex peisong-item">
				<text>物流签收日</text>
				<text >{{info.expressSignForTime}}</text>
			</view>
			<view class="flex peisong-item">
				<text>归还完成日</text>
				<text >{{info.returnCompletedTime}}</text>
			</view>
		</view>
		<!-- 6.合计支付 -->
		<view class="toPay">
			<view class="toPay-btn" @click="findMyFast">查看物流</view>
		</view>

	</view>
</template>

<script>
	import {
		ReturnBackProductInfo,
		getMerchantInfo,
		giveBackMyPhone
	} from '@/api/order.js';

	import {
		getFastMailConpany
	} from '@/api/api.js';

	export default {
		data() {
			return {
				orderNo: '',
				info:'',
				goodsInfo: '',
				merInfo: '',
			}
		},
		onLoad(options) {
			this.goodsInfo = JSON.parse(options.detail);
			console.log(this.goodsInfo,'传递过来的参数')
			this.orderNo = options.orderNo;
			this.getMerInfo();
			this.getProductInfo();
			
		},
		methods: {
		findMyFast() {
				uni.navigateTo({
					url: `/pages/other/logistics?tradeNo=${this.info.tradeNo}&logisticsCode=${this.info.expressCode}&waybillNo=${this.info.expressNumber}`
				});
			},
			//商户详情
			getMerInfo() {
				getMerchantInfo({
						merId: this.goodsInfo.merId
					})
					.then(res => {

						this.merInfo = res.data;
						console.log(this.merInfo, '商户详情')
					})
			},
			//归还详情
			getProductInfo(){
				ReturnBackProductInfo(
				{
					orderNo:this.orderNo
				})
				.then(res=>{
					this.info = res;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 200px;
		height: 10px;
	}

	.box-title {
		font-size: 20px;
	}

	.box-:hover {
		background-color: red;
	}

	.box .text {
		background-color: pink;
	}

	.nav {
		height: 40px;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20px;
	}

	.nav h4,
	.nav view,
	.nav i {
		flex-grow: 1;
	}

	.nav h4 {
		text-align: center;
	}

	.person {
		/* width: 375px; */
		margin: 10px;
		background-color: #fff;
		padding: 10px;
		align-items: center;
	}

	.person-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		/* 使原图不受挤压 */
		flex-shrink: 0;
	}

	.person-info {
		font-size: 15px;
		color: #262626;
	}

	.person-info text:last-child {
		margin-left: 20px;
	}

	.person-address {
		font-size: 12px;
		line-height: 18px;
		color: #333;
	}

	/* 商品信息 */
	.goods {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.goods image:first-child {
		width: 85px;
		height: 85px;
	}

	.goods-info {
		height: 35px;
		font-size: 13px;
		line-height: 19px;
		color: #262626;
		/* 溢出隐藏，省略号 */
		overflow: hidden;
		/* 文本超出给予省略号 */
		text-overflow: ellipsis;
		/* 溢出不换行 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		line-clamp: 2;
		-webkit-line-clamp: 2;
	}

	.goods-tag {
		margin: 10px 0;
	}

	.goods-tag text {
		font-size: 11px;
		color: #888;
		background-color: rgb(246, 247, 247);
	}

	.goods-price-icon {
		font-size: 9px;
		color: red;
	}

	.goods-price-num {
		font-size: 16px;
		color: red;
	}

	.line-through {
		text-decoration: line-through;
	}

	.gray {
		color: #888;
	}

	.goods-price p:last-child {
		margin-left: 10px;
	}

	/* 配送 */
	.peisong {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.peisong-item {
		margin: 20px 0;
	}

	.peisong-tips {
		font-size: 12px;
		color: #989898;
		margin-left: 20px;
		/* 溢出省略显示省略号一行显示 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 20px;
	}

	/* 总价 */
	.zongjia {
		margin: 10px;
		padding: 10px;
		background-color: #fff;
		font-size: 13px;
		color: #262626;
		letter-spacing: 1px;
	}

	.zhekou {
		color: red;
	}

	.zongjia-yunfei {
		margin: 20px 0;
	}

	/* 合计支付 */
	.toPay {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background-color: #fff;
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: right;
	}

	.toPay text:first-child {
		font-size: 11px;
		letter-spacing: 1px;
		line-height: 19px;
		color: #1e1e1e;
	}

	.toPay text:last-child {
		font-size: 13px;
		line-height: 19px;
		color: #cf4444;
		font-weight: 600;
	}

	.toPay-btn {
		width: 90px;
		height: 35px;
		border-radius: 3px;
		background-color: rgba(255, 110, 19, 1);
		font-size: 13px;
		text-align: center;
		line-height: 35px;
		color: #fff;
		margin-right: 20px;
	}
	.flex,.justify-between{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E4E7ED;
		padding-bottom: 10px;
	}
</style>